<template>
  <a-card>
    <TableSearch
      ref="tableSearch"
      :fields="fields"
      @searchEmit="searchEmit"
      @resetEmit="resetEmit"
      :isRefreshBtn="false"
      @refreshEmit="$refs.table.refresh()"
      :toolSettings="toolSettings"
    />
    <s-table
      ref="table"
      rowKey="id"
      :size="tableSize"
      :columns="columns"
      :data="tableData"
      :scroll="{ x: 1000 }"
      :onCompleted="onCompleted"
    >
      <template slot="idle" slot-scope="text, record">
        <a-tag v-if="text == 0" @click="idlePlace(record, 1)" class="cursor" color="#52c41a">空闲</a-tag>
        <a-tag v-else @click="idlePlace(record, 0)" class="cursor" color="#ff4d4f">占用</a-tag>
      </template>
      <template slot="type" slot-scope="text">
        <span v-if="text == 1">固定车位</span>
        <span v-else>否</span>
      </template>
      <template slot="number" slot-scope="text">
        {{ text || '-' }}
      </template>
      <template slot="images" slot-scope="text">
        <span v-for="url in text" :key="url">
          <a-avatar
            @click="imagePreview(formatUrl(url))"
            :src="formatUrl(url)"
            shape="square"
            :size="32"
            style="cursor: pointer;border: 1px solid #ccc"
          />
          &nbsp;
        </span>
      </template>
      <template slot="o" slot-scope="text, record">
        <a-button @click="edit(record)" type="link" size="small">编辑</a-button>
        <a-button v-if="record.type != 1 && record.idle != 1" @click="fixedPlace(record)" type="link" size="small">固定车位</a-button>
        <a-popconfirm
          title="确定删除该车位吗?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deletePlace(record)"
        >
          <a-button v-if="record.role != 0" :loading="record.loading" type="link" size="small">删除</a-button>
        </a-popconfirm>
      </template>
    </s-table>
    <ImportPlaceModal ref="ImportPlaceModal" />
    <Preview
      v-if="previewShow"
      :url-list="previewList"
      :onClose="closePreview"
    />
    <PlaceForm ref="PlaceForm" @batchImport="$refs.table.refresh(true)" />
    <FixedPlace ref="FixedPlace" />
  </a-card>
</template>

<script>
import { TableSearch, STable } from '@/components'
import { getPlaceListAPI, addPlaceAPI, editPlaceAPI, deletePlaceAPI, fixedPlaceAPI, idlePlaceAPI } from '@/api/place'
import { searchEmit, resetEmit } from '@/views/biz/common'
import ImportPlaceModal from './modules/ImportPlaceModal.vue'
import Preview from '@/components/Image/code/preview.vue'
import PlaceForm from './modules/PlaceForm.vue'
import FixedPlace from './modules/FixedPlace.vue'

let bodyOverflow = ''

export default {
  components: { TableSearch, STable, ImportPlaceModal, Preview, PlaceForm, FixedPlace },
  data () {
    return {
      toolSettings: [
        { text: '导入车位数据', icon: 'vertical-align-top', type: '#1890ff', click: () => { this.importPlace() } },
        // { text: '添加车位', icon: 'plus', type: 'primary', click: () => { this.add() } }
      ],
      fields: [
        { field: 'code', type: 'input', label: '编号', value: '', placeholder: '请输入编号' },
        { field: 'idle', type: 'select', label: '是否停放', value: undefined, placeholder: '请选择是否停放', options: [{ label: '空闲', value: 0 }, { label: '占用', value: 1 }] },
        { field: 'type', type: 'select', label: '固定车位', value: undefined, placeholder: '请选择固定车位', options: [{ label: '是', value: 1 }, { label: '否', value: 0 }] },
        { field: 'number', type: 'input', label: '车牌号码', value: '', placeholder: '请输入车牌号码' },
        // { field: 'realname', type: 'input', label: '用户姓名', value: '', placeholder: '请输入' },
        { field: 'phone', type: 'input', label: '手机号码', value: '', placeholder: '请输入手机号码' }
      ],
      columns: [
        { title: '编号', dataIndex: 'code', width: 80, align: 'center' },
        { title: '是否停放', dataIndex: 'idle', width: 100, align: 'center', scopedSlots: { customRender: 'idle' } },
        { title: '固定车位', dataIndex: 'type', width: 120, align: 'center', scopedSlots: { customRender: 'type' } },
        { title: '用户姓名', dataIndex: 'realname', width: 100 },
        { title: '车牌号码', dataIndex: 'number', width: 100, align: 'center', scopedSlots: { customRender: 'number' } },
        { title: '手机号码', dataIndex: 'phone', width: 120, align: 'center' },
        { title: '车位图片', dataIndex: 'images', width: 174, scopedSlots: { customRender: 'images' } },
        { title: '备注', dataIndex: 'note', width: 200, ellipsis: true },
        { title: '创建日期', dataIndex: 'createTime', width: 150, align: 'center' },
        { title: '更新日期', dataIndex: 'updateTime', width: 150, align: 'center' },
        { title: '其他操作', dataIndex: 'operation', align: 'center', width: 220, scopedSlots: { customRender: 'o' }, fixed: 'right' }
      ],
      tableData: query => {
        return getPlaceListAPI(Object.assign(query, this.params))
      },
      params: {
        code: '',
        idle: undefined,
        type: undefined,
        number: '',
        realname: '',
        phone: ''
      },
      previewShow: false,
      previewList: []
    }
  },
  methods: {
    searchEmit,
    resetEmit,
    onCompleted (rows) {
      rows.forEach(item => {
        item.images = item.images ? item.images.split(',') : []
      })
      return rows
    },
    /** @name 导入车位 **/
    importPlace () {
      this.$refs.ImportPlaceModal.open()
    },
    /** @name 图片预览 **/
    imagePreview (url) {
      this.previewList = [url]
      if (this.previewShow) return
      bodyOverflow = document.body.style.overflow
      document.body.style.overflow = 'hidden'
      this.previewShow = true
    },
    /** @name 关闭预览 **/
    closePreview () {
      document.body.style.overflow = bodyOverflow
      this.previewShow = false
    },
    /** @name 添加车位 **/
    add () {
      this.$refs.PlaceForm.open('添加车位', null, (form, done) => {
        addPlaceAPI({
          ...form,
          images: form.images.join(',')
        }).then(() => {
          this.$refs.table.refresh(true)
          this.$message.success('添加成功')
          done(true)
        }).finally(() => {
          done(false)
        })
      })
    },
    /** @name 编辑车位 **/
    edit (record) {
      this.$refs.PlaceForm.open('编辑车位', this.deepClone(record), (form, done) => {
        editPlaceAPI({
          ...form,
          images: form.images.join(','),
          id: record.id
        }).then(() => {
          this.$refs.table.refresh()
          this.$message.success('编辑成功')
          done(true)
        }).finally(() => {
          done(false)
        })
      })
    },
    /** @name 删除用户 **/
    deletePlace (record) {
      this.$set(record, 'loading', true)
      deletePlaceAPI({ id: record.id }).then(() => {
        this.$refs.table.refresh(true)
        this.$message.success('删除成功')
      }).finally(() => {
        this.$set(record, 'loading', false)
      })
    },
    /** @name 设置固定车位 **/
    fixedPlace (record) {
      this.$refs.FixedPlace.open(record, (form, done) => {
        fixedPlaceAPI({
          id: record.id,
          userId: form.userId,
          number: form.number
        }).then(() => {
          this.$refs.table.refresh()
          this.$message.success('设置固定车位成功')
          done(true)
        }).finally(() => {
          done(false)
        })
      })
    },
    /** @name 设置车位是否是空闲 **/
    idlePlace (record, idle) {
      this.$confirm({
        title: '温馨提示',
        content: h => <div>确定把该车位设置成<span style={{ color: idle === 1 ? '#ff4d4f' : '#52c41a' }}> {idle === 1 ? '占用' : '空闲'} </span>状态？</div>,
        onOk: () => {
          idlePlaceAPI({
            id: record.id,
            idle
          }).then(() => {
            this.$refs.table.refresh()
            this.$message.success('设置成功')
          })
        }
      })
    }
  }
}
</script>
